<template>

	<view class="detailBanner">
		<headerSpaceBetweenVue>
			<template #icon>
				<uni-icons @click="toggleCollect()" :type="isCollect ? 'star-filled' : 'star'" class="collect"
					size="22"></uni-icons>
				<uni-icons @click="otherAct()" type="settings" size="22"></uni-icons>
			</template>
			<template #title>文章详细</template>
		</headerSpaceBetweenVue>
		<scroll-view scroll-y>

			<view class="content">
				<view class="title">
					{{artData.title}}
				</view>
				<view class="info">
					<view class="left">
						<view class="avator" @click="goUserInfo(artData.userInfo.id)">
							<image :src="artData.userInfo ? artData.userInfo.avator : '/common/images/avator.gif'"
								mode="aspectFill"></image>
						</view>
						<view class="info-about" v-if="artData.userInfo">
							<view class="nickname">{{artData.userInfo ? artData.userInfo.nickname : '该用户已被删除'}}</view>
							<view class="signature">{{artData.userInfo ? artData.userInfo.signature : '该用户很懒，什么也没留下~'}}
							</view>
						</view>
					</view>
					<view class="right">
						<button
							@click="toggleFollow(artData.userInfo.id)">{{artData.is_followed == 1 ? '已关注' : '关注'}}</button>
					</view>
				</view>
				<view class="art-about">
					<view class="item add-tiem">
						<uni-icons type="calendar"></uni-icons>
						{{artData.create_time}}
					</view>
					<view class="item read">
						<uni-icons type="eye"></uni-icons>
						{{artData.heat}}
					</view>
					<view class="item read">
						<uni-icons type="chatbubble"></uni-icons>
						{{artData.comment}}
					</view>
				</view>
				<view class="content-main">
					<view class="content editor-content-view w-e-text-container">
						<mp-html :content="artData.content" id="editor-container"/>
					</view>
					<uni-card :title="artData.is_payed == 0 ? '回复后可见' : '隐藏内容'"
						:extra="artData.is_payed == 1 ? '复制内容' : '回复'" v-if="artData.type == 3"
						@click="payArt(artData)">
						<text class="hide-content">{{artData.is_payed == 1 ? artData.hide_content : '回复后查看隐藏内容'}}</text>
					</uni-card>
					<uni-card :title="artData.is_payed == 0 ? '支付' + artData.score +  '积分解锁' : '隐藏内容'"
						:extra="artData.is_payed == 1 ? '复制内容' : '立即解锁'" v-if="artData.type == 2"
						@click="payArt(artData)">
						<text
							class="hide-content">{{artData.is_payed == 1 ? artData.hide_content : '支付积分查看隐藏内容'}}</text>
					</uni-card>
				</view>
				<view class="comment">
					<view class="comment-header">
						<text class="title">评论({{commentCount}})</text>

						<view class="action">
							<text @click="toggleCommentType(1)"
								:class="{'commentTypeList' : commentListType == 1}">全部</text>
							<text> | </text>
							<text @click="toggleCommentType(2)"
								:class="{'commentTypeList' : commentListType == 2}">只看楼主</text>
						</view>
					</view>
					<view class="comment-list">
						<commentItemVue :uid="artData.user_id" @doReply="doReply" v-for="item in commentList"
							:item="item" :key="item.id">
						</commentItemVue>
						<uni-load-more :status="hasMore && isLoadComment ? 'loading' : 'noMore'"></uni-load-more>
					</view>
					<view class="add-comment" v-if="artData.status == 1">
						<view class="left">
							<input type="text" v-model="comment" :placeholder="commentInput" ref="inputBox" />
						</view>
						<view class="right">
							<view class="cancelRespone" v-if="isReply" @click="doReply(false)">取消回复</view>
							<view @click="sendComment" v-if="comment != ''">发送</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="moreAct" v-if="moreActShow">
			<view class="item" @click="moreAct(1)" v-if="useUserStore().$state.id == artData.user_id">编辑</view>
			<view class="item" @click="moreAct(2)">分享</view>
			<view class="item" @click="moreAct(3)">刷新</view>
			<view class="item" @click="moreAct(4)">关闭</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import commentItemVue from '@/components/comment-item/comment-item.vue';
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import {
		apiGetComment,
		apiPayArt,
		apiReadArt,
		apiSendComment,
		apiToggleCollectArt,
		apiToggleFollow
	} from '@/api/apis';
	import {
		ref,
		toRefs
	} from 'vue';
	import {
		useUserStore
	} from '@/store/user';

	let artData = ref([])
	let commentList = ref([])
	let page = ref(1)
	let comment = ref('')
	let artId = 0
	let isLoadComment = ref(false)
	let hasMore = ref(true)
	// 判断用户是否评论为回复
	let isReply = ref(false)
	let commentInput = ref('写下你的评论...')
	// 1所有评论，2楼主评论
	let commentListType = ref(1)
	let commentCount = ref(0)
	// 判断文章是否回复或支付
	let isPay = ref(false)
	let isCollect = ref(false)
	let inputBox = ref(null)
	let moreActShow = ref(false)
	let currentUrl = ref('')
	onLoad((e) => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		artId = e.id
		artDetail(e.id)
		getComment({
			id: e.id,
		})

	})
	// 收藏文章
	const toggleCollect = async () => {

		await apiToggleCollectArt({
			id: artId
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				isCollect.value = !isCollect.value
			}
		})
	}
	const otherAct = () => {
		moreActShow.value = !moreActShow.value
	}
	const copyText = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			},
			fail: (err) => {
				console.error('复制失败', err);
			}
		});
	}

	const moreAct = (type) => {
		if (type == 1) {
			uni.navigateTo({
				url: "/pages/article/edit?id=" + artData.value.id
			})
		} else if (type == 2) {
			const text = `[${artData.value.title}]\n${window.location.href}`
			copyText(text)
		} else if (type == 3) {
			// #ifdef H5
			window.location.reload()
			// #endif
		} else if (type == 4) {
			moreActShow.value = false
		}
	}
	const artDetail = async (id) => {
		await apiReadArt({
			id
		}).then(res => {
			artData.value = res.data
			isPay.value = res.data.is_payed == 1 ? true : false
			isCollect.value = res.data.is_collected == 1 ? true : false
			uni.hideLoading()
		})
	}
	// 切换评论类型
	const toggleCommentType = async (type) => {
		commentListType.value = type
		page.value = 1
		getComment({
			id: artId,
			type: type,
			page: page.value
		})
	}
	const getComment = async (query) => {
		await apiGetComment(query).then(res => {
			commentCount.value = res.data.total
			commentList.value = res.data.data
		})
	}
	// 是否回复
	function doReply(id) {
		if (id) {
			commentInput.value = "回复:" + id.userInfo.nickname
		} else {
			commentInput.value = "写下你的评论..."
		}
		isReply.value = id
	}
	// 图片预览
	const previewImg = (index) => {
		uni.previewImage({
			urls: artData.value.images,
			index
		})
	}
	onReachBottom(() => {
		if (isLoadComment.value || !hasMore.value) return
		isLoadComment.value = true
		page.value = page.value + 1
		apiGetComment({
			id: artId,
			page: page.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoadComment.value = false
				commentList.value = [...commentList.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoadComment.value = false
			}
		})

	})
	// 发送评论
	const sendComment = async function(e) {
		if (comment.value == "") return
		let obj = {
			id: artId,
			comment: comment.value
		}
		if (isReply.value) {
			obj['pid'] = isReply.value.id
			isReply.value = false
		}
		await apiSendComment(obj).then(async (res) => {
			if (res.code == 200) {
				if (!isPay.value && artData.value.type == 3) {
					// 刷新数据
					await apiReadArt({
						id: artId
					}).then(res => {
						artData.value = res.data
					})
					isPay.value = true
				}
				commentCount.value = commentCount.value + 1
				uni.showToast({
					title: '发送成功',
					icon: 'none'
				})
				comment.value = ""
				commentList.value.push(res.data)
			}
		})
	}
	// 查看个人信息
	const goUserInfo = (id) => {
		uni.navigateTo({
			url: "/pages/user/user?id=" + id
		})
	}

	const toggleFollow = async (id) => {
		await apiToggleFollow({
			id
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				artData.value.is_followed = !artData.value.is_followed
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	// 付费文章
	const payArt = (data) => {
		if (data.type != 1 && data.is_payed != 1) {
			// 购买操作
			if (data.type == 3) {} else {
				uni.showModal({
					title: '温馨提示',
					content: '确定要购买吗\nPs:购买成功后，无法退还积分',
					success: async (res) => {
						if (res.confirm) {
							await apiPayArt({
								id: data.id
							}).then(async (res) => {
								uni.showToast({
									title: res.code == 200 ? '购买成功' : res.msg,
									icon: 'none'
								})
								if (res.code == 200) {
									// 刷新数据
									await apiReadArt({
										id: artId
									}).then(res => {
										artData.value = res.data
									})
								}
							})
						}
					}
				})
			}
		} else {
			copyText(data.hide_content)
		}

	}
</script>

<style lang="scss" scoped>
	* {
		-webkit-user-select: text;
	}

	.detailBanner {
		position: relative;

		.moreAct {
			position: absolute;
			right: 0;
			top: calc(var(--status-bar-height) + 90rpx);
			background-color: #fff;
			box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.08);
			border-radius: 0 10rpx 0;

			.item {
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				line-height: 80rpx;
				border-bottom: 1rpx solid #eee;
			}
		}

		.collect {
			margin-right: 20rpx;
		}

		&:first-child {
			padding-top: calc(var(--status-bar-height) + 90rpx);
		}

		.content {
			padding: 20rpx;

			&>.title {
				font-size: 40rpx;
				font-weight: 700;
			}

			.info {
				display: flex;
				align-items: center;
				height: 92rpx;
				margin: 20rpx 0;

				.left {
					display: flex;
					align-items: center;
					flex: 1;

					.avator {
						height: 61rpx;
						width: 61rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info-about {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.nickname {
							color: #000;
							font-size: 25rpx;
						}

						.signature {
							color: #7d8390;
							font-size: 15rpx;
						}
					}
				}

				.right {
					width: 130rpx;
					height: 50rpx;

					button {
						background-color: $theme-color;
						border-radius: 28rpx;
						color: #fff;
						font-size: 16rpx;

					}
				}
			}
		}

		.art-about {
			display: flex;
			line-height: 38rpx;

			.item {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #7d8390;
				margin-right: 30rpx;
			}
		}

		.content-main {
			font-size: 30rpx;
			color: #000;
			margin: 20rpx 0;
			width: 100%;
			word-wrap: break-word;
			word-break: break-all;
			white-space: normal;
		}

		.comment {
			.comment-header {
				display: flex;
				justify-content: space-between;

				.title {
					color: #000;
					font-weight: 700;
					font-size: 30rpx;

				}

				.action {
					font-size: 28rpx;
					color: #6b7280;

					.commentTypeList {
						color: #000;
					}
				}
			}

			.comment-list {
				padding-bottom: 100rpx;
			}
		}

		.add-comment {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			right: 0;
			height: 117rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			padding: 0;

			.left {
				flex: 1;
				display: flex;
				align-items: center;

				input {
					width: 100%;
					padding: 0 20rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				height: 100%;

				view {
					display: inline-block;
					width: 80rpx;
					height: 100%;
					background-color: $theme-color;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 24rpx;
				}

				.cancelRespone {
					width: 120rpx;
					background-color: #fafafa;
					color: $theme-color;
				}
			}
		}
	}
</style>